<template>
  <div class="wrap">
    <user-check-box v-model="queryParams.userIds" @change="changeOption" :filter-stop="true" @apiUserFinish="changeOption" :disdisabled="loading"></user-check-box>
    <div class="header mgt20">
      <div class="left">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择"
          size="small"
          class="header-select"
          @change="changeOption"
        >
          <el-option :label="$t('common.全部类型')" value=""></el-option>
          <el-option :value="1" :label="$t('labelOrder.入库贴标')"></el-option>
          <el-option :value="2" :label="$t('labelOrder.调货贴标')"></el-option>
          <el-option :value="3" :label="$t('labelOrder.送仓贴标')"></el-option>
        </el-select>
      </div>
      <div class="right">
        <el-input
          size="small"
          style="width: 250px; margin-right: 10px; margin-bottom: 10px"
          v-model="queryParams.keyword"
          :placeholder="$t('搜索贴标单号')"
          @keyup.enter.native="changeOption"
          clearable
          @clear="changeOption"
        ></el-input>
        <el-button size="small" type="primary" @click="changeOption">{{ $t('common.search') }}</el-button>
      </div>

    </div>
    <div class="content">
      <el-tabs v-model="queryParams.status" @tab-click="changeOption">
        <el-tab-pane name="1" :label="`${$t('labelOrder.待贴标')}(${waitDealTotal})`"></el-tab-pane>
        <el-tab-pane name="2" :label="`${$t('labelOrder.已贴标')}(${doneDealTotal})`"></el-tab-pane>
      </el-tabs>
      <div class="table">
        <el-table
          border
          :data="data"
          v-loading="loading"
          v-tableHeight="{bottomOffset: 80}"
          height="100px"
          ref="tableData"
        >
          <el-table-column
            :label="$t('table.贴标单号')"
            prop="labelNo"
            align="center"
            min-width="250"
            show-overflow-tooltip
            fixed
          >
            <template slot-scope="{row}">
              <diy-link @click="jumpLabelOrderInfo(row.id)">{{row.labelNo}}</diy-link>
            </template>
          </el-table-column>
          <template v-if="queryParams.status !== '2'">
            <el-table-column
              :label="$t('table.预计贴标SKU种数')"
              prop="exSkuNum"
              align="center"
              min-width="150"
            >
              <template v-slot="{row}">
                {{row.exSkuNum}}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.预计贴标商品总数量')"
              prop="exGoodsNum"
              align="center"
              min-width="150"
            >
              <template v-slot="{row}">
                {{row.exGoodsNum}}
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :label="$t('table.实际贴标SKU种数')"
              prop="rlSkuNum"
              align="center"
              min-width="150"
            >
              <template v-slot="{row}">
                <span :class="[row.rlSkuNum === row.exSkuNum ? '' : 'font-red']">{{row.rlSkuNum}}</span>
                /
                <span>{{row.exSkuNum}}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.实际贴标商品总数量')"
              prop="rlGoodsNum"
              align="center"
              min-width="150"
            >
              <template v-slot="{row}">
                <span :class="[row.rlGoodsNum === row.exGoodsNum ? '' : 'font-red']">{{row.rlGoodsNum}}</span>
                /
                <span>{{row.exGoodsNum}}</span>
              </template>
            </el-table-column>
          </template>

          <el-table-column
            :label="$t('table.贴SKU标单价（元）')"
            prop="labelFee"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <template v-if="queryParams.status !== '2'">
            <el-table-column
              :label="$t('table.预计贴SKU标费用（元）')"
              prop="exTotalFee"
              align="center"
              min-width="150"
            >
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :label="$t('table.实际贴SKU标费用（元）')"
              prop="rlTotalFee"
              align="center"
              min-width="150"
            >
            </el-table-column>
          </template>

          <el-table-column
            :label="$t('table.贴标类型')"
            prop="type"
            align="center"
            min-width="150"
          >
            <template v-slot="{row}">
              {{getLabelTypeStr(row.type)}}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.createTime2')"
            prop="createTime"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.确认时间')"
            prop="confirmTime"
            align="center"
            width="150"
          >
            <template v-slot="{row}">
              {{row.confirmTime || '-'}}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.完成时间')"
            prop="finishTime"
            align="center"
            width="150"
          >
            <template v-slot="{row}">
              {{row.finishTime || '-'}}
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.operate')"
            prop="operate"
            align="left"
            width="300"
            fixed="right"
          >
            <template v-slot="{row}">
              <div class="mgb10">
                <el-button type="view"  @click="jumpLabelOrderInfo(row.id)">{{$t('common.view')}}</el-button>
                <export-button :func="getLabelOrderInfo" :query-params="row.id" :get-total="1"></export-button>
                <template v-if="row.shipment">
                  <el-button type="primary"  @click="jumpShipmentInfo(row.shipment.id, true)">{{$t('shipment.货件单')}}</el-button>
                </template>
                <template v-if="row.middle">
                  <el-button type="primary"  @click="jumpMiddleInfo(row.middle.id, true)">{{$t('middle.送仓工单')}}</el-button>
                </template>
                <template v-if="row.transfer">
                  <el-button type="primary" class="mgb10"  @click="jumpTransferInfo(row.transfer.id, true)">{{$t('transfer.调货工单')}}</el-button>
                </template>
              </div>
              <div>
                <template v-if="row.type !== 1">
                  <button-thermal :id="row.id" class="mgr10"></button-thermal>
                </template>
              </div>
            </template>
          </el-table-column>



        </el-table>


      </div>

      <div class="page-wrap">
        <el-pagination
          @current-change="getData"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import UserCheckBox from "@/views/shipment/components/UserCheckBox";
import {getLabelOrderInfo, getLabelOrderList} from "@/api/labelOrder";
import {deepCopy} from "@/utils";
import {jumpLabelOrderInfo, jumpMiddleInfo, jumpShipmentInfo, jumpTransferInfo} from "@/utils/jumpView";
import ButtonThermal from "@/views/labelOrder/components/ButtonThermal";
import {getLabelTypeStr} from "@/utils/labelOrder";
import ExportButton from "@/views/order/components/ExportButton.vue";

export default {
  name: "labelOrderList",
  components: {ExportButton, UserCheckBox,ButtonThermal},
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        userIds: [-1],
        type: '', // 类型
        status: '1', // 贴标状态
        keyword: '',
      },
      data: [],
      loading: false,
      total: 0,
      waitDealTotal: 0, // 待贴标数量
      doneDealTotal: 0, // 已贴标数量
    }
  },
  created() {
    this.getData()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods:{
    getLabelOrderInfo,
    getLabelTypeStr,
    jumpTransferInfo,
    jumpMiddleInfo,
    jumpShipmentInfo,
    jumpLabelOrderInfo,
    getData(){
      this.loading = true
      getLabelOrderList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.total = res.info.total
          this.data = deepCopy(res.data)
          this.waitDealTotal = res.info.waitDealTotal
          this.doneDealTotal = res.info.doneDealTotal
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
</style>
